<template>
  <div class="content">
    <div id="container"></div>

    <!--  这里是 头部 -->
    <div class="head">
      <p class="headl">数据展示大屏</p>
      <h1>智能化管理平台</h1>
      <div class="boxtime">
        <!-- <div class="showTime2">时间: 2021.04.25</div> -->
        <div class="showTime">时间: 2021.04.25</div>
      </div>
    </div>
    <!--  这里是左边 -->
    <div class="leftBox">
      <div class="boxleft1">
        <div class="tou" style="color: #fff">到访客户统计分析</div>
        <!-- <div id="myChart" style="width: 100%; height: 83%"></div> -->
        <optionS style="width: 100%; height: 100%"></optionS>
        <div class="panel-footer"></div>
      </div>
      <div class="boxleft1">
        <div class="tou" style="color: #fff">设备统计分析</div>
        <!-- <div id="myChart2" style="width: 100%; height: 83%"></div> -->
        <optionS3 style="width: 100%; height: 100%"></optionS3>


        <div class="panel-footer"></div>
      </div>
      <div class="boxleft1">
        <div class="tou" style="color: #fff">设备连接异常分析</div>
        <!-- <div id="myChart3" style="width: 100%; height: 83%"></div> -->
        <optionS2 style="width: 100%; height: 100%"></optionS2>

        <div class="panel-footer"></div>
      </div>
      <div class="boxleft1">
        <div class="tou" style="color: #fff">工位数据分析</div>
        <!-- <div id="myChart4" style="width: 100%; height: 83%"></div> -->
        <optionS4 style="width: 100%; height: 100%"></optionS4>

        <div class="panel-footer"></div>
      </div>
    </div>

    <!--  这里是右边 -->
    <div class="rightBox">
      <div class="boxright1">
        <h2 style="color: #fff; text-align:left;margin:10px">温度/湿度/空气质量</h2>
        <dv-scroll-board
        :config="config2"
        style="width: 100%; height: 90%; opacity: 0.5"
      />
        <!-- <div id="myChart5" style="width: 100%; height: 100%"></div> -->
        <!-- <div class="panel-footer"></div>    下角标 -->
      </div>
      <!-- <div class="boxright1">
        <h2>我是湿度/空气质量</h2>
        <div id="myChart6" style="width: 100%; height: 100%"></div>
        <div class="panel-footer"></div>
      </div> -->

      <div class="boxright2" style="height: 34%">
        <div id="dialog" v-if="show">
          <div id="close" @click="close">x</div>
          <!-- 引入视频子组件 -->
          <vuePlayer></vuePlayer>
        </div>
        <!-- 这里不能用v-if   用了 都没这个 dom   下面怎么拿到  dom? 在 渲染图表 ?????   -->
        <div
          id="myChart7"
          style="width: 100%; height: 100%"
          v-show="false"
        ></div>
        <!-- <img src="../images/aj.jpg" style="width: 100%;" alt="" /> -->

        <div class="panel-footer"></div>
      </div>
    </div>

    <!--  这里是中间 -->
    <div class="centerBox">
      <!-- <div class="biaoge"> -->

      <dv-scroll-board
        :config="config"
        style="width: 100%; height: 100%; opacity: 0.5"
      />
      <!-- </div> -->
    </div>

    <!-- <div v-show="show"  id="dialog">
      <div id="close" @click="show=false">x</div>
    </div> -->
  </div>
</template>

<script>
//  echarts 图表   封装子组件  导入
import optionS from "./echarts/options.vue";
import optionS2 from "./echarts/options2.vue";
import optionS3 from "./echarts/options3.vue";
import optionS4 from "./echarts/options4.vue";
//  导入子组件
import vuePlayer from "./video.vue";


// 时间
import "./times.js";
// 导入布局的  js文件
import "./flexible.js";
// import { View } from "./index";

let view;
export default {
  // 注册子组件
  components: {
    // 视频播放
    vuePlayer,
    // echarts 第一个组件
    optionS,
    optionS2,
    optionS3,
    optionS4,
  },
  data() {
    return {
      show: false,
      config: {
        header: ["列1", "列2", "列3"],
        data: [
          ["行1列1", "行1列2", "行1列3"],
          ["行2列1", "行2列2", "行2列3"],
          ["行3列1", "行3列2", "行3列3"],
          ["行4列1", "行4列2", "行4列3"],
          ["行5列1", "行5列2", "行5列3"],
          ["行6列1", "行6列2", "行6列3"],
          ["行7列1", "行7列2", "行7列3"],
          ["行8列1", "行8列2", "行8列3"],
          ["行9列1", "行9列2", "行9列3"],
          ["行10列1", "行10列2", "行10列3"],
        ],
        index: true,
        columnWidth: [50],
        align: ["center"],
        carousel: "page",
      },
      config2: {
        header: ["列1", "列2", "列3", "列4"],
        data: [
          ["行1列1", "行1列2",    "行1列3", "行1列2",],
          ["行2列1", "行2列2",    "行2列3", "行1列2",],
          ["行3列1", "行3列2",    "行3列3", "行1列2",],
          ["行4列1", "行4列2",    "行4列3", "行1列2",],
          ["行5列1", "行5列2",    "行5列3", "行1列2",],
          ["行6列1", "行6列2",    "行6列3", "行1列2",],
          ["行7列1", "行7列2",    "行7列3", "行1列2",],
          ["行8列1", "行8列2",    "行8列3", "行1列2",],
          ["行9列1", "行9列2",    "行9列3", "行1列2",],
          ["行10列1", "行10列2", "行10列3", "行1列2",],
          ["行1列1", "行1列2",    "行1列3", "行1列2",],
          ["行2列1", "行2列2",    "行2列3", "行1列2",],
          ["行3列1", "行3列2",    "行3列3", "行1列2",],
          ["行4列1", "行4列2",    "行4列3", "行1列2",],
          ["行5列1", "行5列2",    "行5列3", "行1列2",],
          ["行6列1", "行6列2",    "行6列3", "行1列2",],
          ["行7列1", "行7列2",    "行7列3", "行1列2",],
          ["行8列1", "行8列2",    "行8列3", "行1列2",],
          ["行9列1", "行9列2",    "行9列3", "行1列2",],
          ["行10列1", "行10列2", "行10列3", "行1列2",],
        ],
        index: true,
        columnWidth: [50],
        align: ["center"],
        carousel: "single",
        rowNum:8
      },
    };
  },
  mounted() {
    const { View } = require("./index");
    view = new View("#container", this);
  },
  methods: {
    close() {
      this.show = false;
    },
    
  }
};
</script>

<style lang="scss" scoped>
.tou {
  // box-sizing:border-box;
  margin-top: 10px;
  font-size: 0.3rem;
  text-align: left;
  line-height: 20px;
  padding-left: 15px;
  background-color: rgb(0, 144, 233);
  opacity: 0.6;
}
.head {
  position: absolute;
  top: 0;
  width: 100%;
  height: 0.75rem;
  line-height: 0.75rem;
  opacity: 0.3;
  // background-color: pink;
  background: url("../images/head_bg.png");
  p {
    position: absolute;
    top: 0;
    left: 50px;
    color: #fff;
    font-size: 0.29rem;
  }
  h1 {
    text-align: center;
    font-size: 0.6rem;
    color: #fff;
  }
  .showTime {
    position: absolute;
    top: 0;
    right: 2rem;
    color: honeydew;
    font-size: 0.25rem;
    height: 50%;
    line-height: 0.4rem;
  }
}

.centerBox {
  position: absolute;
  top: 54%;
  left: 50%;
  transform: translate(-50%, 50%);
  width: 50%;
  height: 30%;
  //   line-height: 30%;
  // background-color: pink;
  //   border: 1px solid red;
  text-align: center;
  margin: 0 auto;
  box-shadow: border-box;
  //   padding: 20px;
  //   dv-scroll-board {
  //       width: 80%;
  //       height: 80%;
  //   }
  // padding-left: 100px;
  //   .boxXia {
  //     width: 80%;
  //     height: 230px;
  //     background-color: yellow;
  //     text-align: center;
  //   }

  //   .biaoge {
  //     width: 150%;
  //     height: 250px;
  //     background-color: pink;
  //     margin-top: 50px;

  //     table {
  //       width: 100%;
  //       text-align: center;
  //     }
  //     width: 35.375rem;
  //     .eee {
  //       background-color: #133977;
  //     }
  //     .qqq {
  //       color: #01f3fc;
  //       font-size: 0.2875rem;
  //     }
  //     // text-align: center;
  //     // margin: auto;
  //     // background-color: #15428c;
  //     position: absolute;
  //     top: 50%;
  //     left: 50%;
  //     transform: translate(-50%, -45%);
  //     color: #fff;
  //     font-size: 0.25rem;
  //     td {
  //       width: 40px;
  //       padding: 10px;
  //       text-align: center;
  //       // border: 1px solid pink;
  //     }
  //   }
}

.leftBox {
  position: absolute;
  top: 1rem;
  left: 0.125rem;
  width: 20%;
  height: 90%;
  // background-color: pink;
  //   border: 1px solid red;
  text-align: center;
  padding: 10px;
  padding-top: 0;
  //   overflow: hidden;
  .boxleft1 {
    position: relative;
    width: 100%;
    height: 24%;
    margin: 0 0 10px 0;
    // background-color: pink;
    border: 1px solid rgba(255, 255, 255, 0.17);
    &::before {
      position: absolute;
      top: 0;
      left: 0;
      content: "";
      // color: #fff;
      width: 15px;
      height: 15px;
      border-left: 2px solid #02a6b5;
      border-top: 2px solid #02a6b5;
    }
    &::after {
      position: absolute;
      top: 0;
      right: 0;
      content: "";
      // color: #fff;
      width: 15px;
      height: 15px;
      border-right: 2px solid #02a6b5;
      border-top: 2px solid #02a6b5;
    }
    // 这个盒子定位在底部 没有高度
    .panel-footer {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      &::before {
        position: absolute;
        bottom: 0;
        left: 0;
        content: "";
        // color: #fff;
        width: 15px;
        height: 15px;
        border-left: 2px solid #02a6b5;
        border-bottom: 2px solid #02a6b5;
      }
      &::after {
        position: absolute;
        bottom: 0;
        right: 0;
        content: "";
        // color: #fff;
        width: 15px;
        height: 15px;
        border-right: 2px solid #02a6b5;
        border-bottom: 2px solid #02a6b5;
      }
    }
  }
}
.rightBox {
  position: absolute;
  top: 1rem;
  right: .125rem;
  width: 23%;
  height: 78%;
  // background-color: pink;
  //   border: 1px solid red;
  text-align: center;
  padding: 10px;
  padding-top: 0;
  .boxright1 {
    position: relative;
    width: 100%;
    height: 70%;
    margin: 0 0 10px 0;
    // background-color: pink;
    // border: 1px solid green;
    border: 1px solid rgba(255, 255, 255, 0.17);

    &::before {
      position: absolute;
      top: 0;
      left: 0;
      content: "";
      // color: #fff;
      width: 15px;
      height: 15px;
      border-left: 2px solid #02a6b5;
      border-top: 2px solid #02a6b5;
    }
    &::after {
      position: absolute;
      top: 0;
      right: 0;
      content: "";
      // color: #fff;
      width: 15px;
      height: 15px;
      border-right: 2px solid #02a6b5;
      border-top: 2px solid #02a6b5;
    }
    // 这个盒子定位在底部 没有高度
    .panel-footer {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      &::before {
        position: absolute;
        bottom: 0;
        left: 0;
        content: "";
        // color: #fff;
        width: 15px;
        height: 15px;
        border-left: 2px solid #02a6b5;
        border-bottom: 2px solid #02a6b5;
      }
      &::after {
        position: absolute;
        bottom: 0;
        right: 0;
        content: "";
        // color: #fff;
        width: 15px;
        height: 15px;
        border-right: 2px solid #02a6b5;
        border-bottom: 2px solid #02a6b5;
      }
    }
  }
}

// 下面样式 是模板样式  不用动 ===============================
.home {
  width: 100vw;
  height: 100vh;
  // background-color: red;
}

#dialog {
  position: relative;
  width: 100%;
  height: 100% !important;
  // background: rgba(0, 0, 0, 0.5);
}
#close {
  position: relative;
  // top: -10px;
  // right: -100px;
  top: 21px;
  right: -134px;
  font-size: 40px;
  color: red;
  z-index: 10000;
  cursor: pointer;
}
// #panel {
//   background: rgba(0, 0, 0, 0.5);
//   color: white;
//   font-size: 12px;
//   width: 300px;
//   height: 200px;
//   z-index: 10000;
//   position: absolute;
//   left: 0;
//   top: 0;
//   right: 0;
//   bottom: 0;
//   margin: auto;
//   margin-right: 10%;
//   padding: 10px;
// }
// #close {
//   position: absolute;
//   right: -5px;
//   top: -15px;
//   color: white;
//   z-index: 10000;
//   font-size: 20px;
//   font-weight: bold;
//   cursor: pointer;
// }
* {
  margin: 0;
  padding: 0;
}

// ========================================== 下面是他的样式 不用管

// ul{
//   background: white;
// }
// li{
//   list-style: none;
//   font-size: 12px;
//   padding: 5px;
//   cursor: pointer;
//   /* color: white; */
// }
// li:hover{
//   background: black;
//   color: white;
// }
// #container {
//   width: 100vw;
//   height: 100vh;
//   overflow: hidden;
// }
// #search{
//   position: fixed;
//   right: 100px;
//   top: 10px;
//   z-index: 10000;
// }

// ======================================================================
// #close {
//   position: absolute;
//   right: 10px;
//   top: -5px;
//   font-size: 20px;
//   cursor: pointer;
// }
// #dialog {
//   width: 60vw;
//   height: 80vh;
//   background: pink;
//   position: fixed;
//   left: 0;
//   top: 0;
//   right: 0;
//   bottom: 0;
//   z-index: 10000;
//   margin: auto;
// }
ul {
  background: white;
}
li {
  list-style: none;
  font-size: 12px;
  padding: 5px;
  cursor: pointer;
  /* color: white; */
}
li:hover {
  background: black;
  color: white;
}
#container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
#search {
  position: fixed;
  right: 100px;
  top: 10px;
  z-index: 10000;
}
</style>